<template>
  <div class="roll">
    <span
      class="str"
      :class="{ animation: getAn() }"
      :style="{ 'animation-duration': `${(textLen / 3) * 1}s` }"
    >
      <slot></slot>
    </span>
  </div>
</template>
<script>
export default {
  computed: {
    textLen() {
      if (this.$slots?.default?.length) {
        return this.$slots.default[0].text?.length || 0;
      }
      return 0;
    },
  },
  methods: {
    getAn() {
      const roll = this.$el;
      if (!roll) {
        return false;
      }
      const str = roll.getElementsByClassName("str");
      if (str?.length) {
        const rollWidth = roll.offsetWidth;
        const strWidth = str[0].offsetWidth;
        return strWidth > rollWidth;
      }
      return false;
    },
  },
};
</script>
<style lang="scss" scoped>
.roll {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}
.str {
  white-space: nowrap;
  position: absolute;
  left: 0;
  top: 0;
  transform: translateX(0);
}
.animation {
  animation-name: roll;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-delay: 2s;
  // animation-direction: alternate;
}
@keyframes roll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}
</style>
